<template>
  <div class="page-Body">
    <h2 class="page-title">活动评价</h2>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      fit
      empty-text="暂无数据"
      show-header
      v-loading="loading"
      size="default"
      element-loading-text="Loading..."
      :header-cell-style="{ background: '#e7e1fb' }"
      style="width: 100%"
      max-height="650px"
    >
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="activityId" label="活动ID" />
      <el-table-column prop="title" label="活动名称" />
      <el-table-column prop="nickName" label="用户昵称" />
      <el-table-column prop="starRating" label="评分" />
      <el-table-column prop="feedback" label="评分内容" />
      <el-table-column prop="feedbackPics" width="200" label="图片评价">
        <template #default="scope">
          <el-image
            v-if="scope.row.feedbackPics"
            :src="scope.row.feedbackPics"
            fit="cover"
            style="width: 50px; height: 50px"
          />
          <span v-else>暂无封面</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" />
      <el-table-column prop="feedbackTime" label="评分时间" />
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 80, 100]"
        background
        layout="total,sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup name="ActivityEvaluate">
import { getActivityComment } from '@/api/Activity/ActivityMent.js';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
// 列表数据+表单校验
const tableData = ref([]);
const loading = ref(true);
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  ActivityEvaluate();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  ActivityEvaluate();
};
// 获取列表
const ActivityEvaluate = async () => {
  loading.value = true;
  const res = await getActivityComment({
    current: currentPage.value,
    size: pageSize.value,
    query: {
      activityId: route.params.id,
    },
  });
  console.log(res);
  if (res.data.code === 200) {
    tableData.value = res.data.data.items;
    total.value = res.data.data.current || 0;
    loading.value = false;
  }
};

onMounted(() => {
  ActivityEvaluate();
});
</script>

<style lang="scss" scoped></style>
